Débuter en JavaScript

Ce TD présente pas à pas les différentes commandes pour commencer à programmer en JavaScript. Contrairement à ce que l'on fera d'habitude, nous n'utiliserons pour ce TD qu'un seul fichier pour écrire notre code html, css et javascript. Cela vous permettra d'avoir moins à naviguer entre les différentes fenêtres.

Commencez par télécharger la page suivante. Editez là avec Notepad++ et affichez la dans Firefox, ça sera votre fichier de travail.

La fonction alert('texte') permet de faire afficher le texte dans une fenêtre. A l'aide de cette fonction, faire apparaître le message "Hello World". Le message peut être mis entre guillements ou apostrophes. Pour afficher une apostrophe, entre apostrophe, il faut taper \'. De même pour le guillemet. La fonction prompt('texte') permet de faire afficher le texte dans une fenêtre et permet à l'utilisateur d'écrire quelque chose. Demander à l'utilisateur de rentrer son âge.

C'est bien de demandé à l'utilisateur de rentrer quelque chose, mais encore faut-il que l'ordinateur le retienne...

La commande var ma_variable permet de déclarer que ma_variable est une variable. Elle peut contenir du texte ou des nombres. Créer une variable age qui permette d'enregistrer l'âge de l'utilisateur donné à la question précédente. Utilisons ce que nous avons vu pour créer un échange avec l'utilisateur : Afficher un message demandant son nom à l'utilisateur et l'enregistrer dans une variable nom Afficher un second message demandant son âge à l'utilisateur et l'enregistrer dans une variable age Créer ensuite une variable temps qui contienne le nombre d'années restantes avant que l'utilisateur ait 100 ans. Pour finir, afficher un message qui s'adresse à l'utilisateur par son nom et lui dise dans combien de temps il sera centenaire (par exemple : "Bonjour Sam, encore 85 ans pour être centenaire !")
  • Les questions doivent être posées avec des commandes du type nom_variable=prompt("question posée ?")
  • Calculer le temps restant à l'aide d'une soustration...
  • Pour afficher la dernière phrase, il faut utiliser un alert. La difficulté vient de mettre bout à bout les morceaux de la phrase :
    1. "Bonjour "
    2. nom
    3. ", encore "
    4. temps
    5. " pour être centenaire"
    • Pour cela, il faut concaténer les chaînes de caractères avec le signe +.

En JavaScript, pour commenter une zone de plusieurs lignes (elle sera ignorée), on utilise la syntaxe suivante :

/*
cette phrase est ignorée
cette phrase aussi..
x=23+y mais cette ligne est ignorée aussi
*/
 Pour ignorer une seule ligne, il faut la faire commencer par // la phrase est ignorée Pour les parties suivantes, nous n'avons besoin que de l'âge. Utiliser des commentaires pour ignorer tout le reste.

Nous allons maintenant tester l'âge de l'utilisateur avec la commande if :

En JavaScript, la commande if se rédige de la manière suivante : if(condition){ //si la condition est vraie, je fais ça } else{ //sinon je fais plutôt ça } Réaliser une suite d'instructions qui :
  • Demande l'âge de l'utilisateur
  • Affiche le message "tu es majeur, tu peux continuer à visiter ce site" si l'age est supérieur ou égal à 18
  • Affiche le message "Tu es mineur, passes ton chemin", sinon.
En JavaScript, la commande while se rédige de la manière suivante : while(condition){ //faire ça tant que la condition est vraie } while signifie tant que. C'est une boucle à manier avec précaution : en effet, elle peut amener un script à tourner à l'infini si l'on ne sort jamais de la condition ! Il faudra donc impérativement vérifier que l'on fait changer les variables à l'intérieur de la boucle while. En modifiant la réponse précédente, créer un script qui demande en continu de rentrer son âge tant que qu'il n'est pas supérieur à 18 ans :
  • si un âge inférieur à 18 ans est rentré : "tant que tu n'as pas plus de 18 ans, passes ton chemin."
  • si un âge supérieur à 18 ans est rentré : "tu es assez vieux pour continuer".

for permet de réaliser une boucle exactement n fois. C'est une boucle que vous avez rencontré très souvent en mathématique pour faire des calculs avec des suites. Voici donc une petite parenthèse mathématique.

En JavaScript, la commande for se rédige de la manière suivante : for(var i=0; i<n; i++){ //instructions à répéter avec i qui est //incrémenté à chaque passage } On dit qu'une variable de type entier est incrémentée quand sa valeur augmente de 1 Il est possible de démarrer la boucle à une autre valeur que 0, il est possible d'utiliser le signe < au lieu de <=. Réaliser un script permettant de calculer la somme des entiers de 0 à 100. Il affichera "la somme des entiers de 0 à 100 vaut : ....".
  • Créer une variable S qui contiendra la valeur de la somme à la fin
  • S vaut 0 au départ
  • À l'intérieur de la boucle, S prend la valeur de S+i à chaque étape